<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/get-started/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>Get Started - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li class="active">
                    <a href=".">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="..">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../configuration/data">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#get-started">Get Started</a></li>
        
            <li><a href="#install-automatically">Install Automatically</a></li>
        
            <li><a href="#install-using-cdns">Install using CDNs</a></li>
        
            <li><a href="#install-manually">Install Manually</a></li>
        
            <li><a href="#usage">Usage</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="get-started">Get Started</h1>
<h2 id="install-automatically">Install Automatically</h2>
<ul>
<li>
<p>This requires <a href="https://www.npmjs.com/">npm</a>, <a href="https://yarnpkg.com/">yarn</a> or <a href="https://bower.io/">bower</a></p>
</li>
<li>
<p>Download and install <code>angular-gantt</code> using one of the supported package manager.</p>
<p><a href="https://github.com/angular-gantt/angular-gantt/releases/latest">Latest released version</a> is the recommended and stable version.</p>
<pre><code>yarn add angular-gantt --save
</code></pre>
<p><a href="https://github.com/angular-gantt/angular-gantt/tree/master">Master branch version</a> contains bleeding edge features, but may be very unstable.</p>
<pre><code>yarn add angular-gantt#master --save
</code></pre>
</li>
</ul>
<h2 id="install-using-cdns">Install using CDNs</h2>
<ol>
<li>
<p>You can find released version on CDNs.</p>
<p><a href="http://www.jsdelivr.com/">jsDelivr</a></p>
<pre><code>//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css
</code></pre>
<p><a href="http://www.cdnjs.com/">CDNjs</a> (Replace <code>&lt;version&gt;</code> with latest github tag)</p>
<pre><code>//cdnjs.cloudflare.com/ajax/libs/angular-gantt/&lt;version&gt;/angular-gantt.min.css
</code></pre>
</li>
<li>
<p>Add <code>angular-gantt.min.js</code> and <code>angular-gantt.min.css</code> URLs to your HTML code.</p>
<pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</li>
</ol>
<h2 id="install-manually">Install Manually</h2>
<ol>
<li>
<p>Install <a href="../faq#what-are-the-dependencies">dependencies</a> in your application.</p>
</li>
<li>
<p>Download angular-gantt or use CDNs.
    <a href="https://github.com/angular-gantt/angular-gantt/releases/latest">Latest released version</a> is available to 
    <a href="https://github.com/angular-gantt/angular-gantt/releases/latest">download</a> on Github and is the recommended and stable version.</p>
<p><a href="https://github.com/angular-gantt/angular-gantt/tree/master">Master branch version</a> contains bleeding edge features, but may be very unstable.</p>
</li>
<li>
<p>Copy <code>angular-gantt.js</code> and <code>angular-gantt.css</code> located in <code>dist</code> directory to your application source folder.</p>
</li>
<li>
<p>Add <code>angular-gantt.js</code> and <code>angular-gantt.css</code> files to your HTML code.</p>
<pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="dist/angular-gantt.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src="../dist/angular-gantt.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</li>
</ol>
<h2 id="usage">Usage</h2>
<ol>
<li>
<p>Register <code>gantt</code> in your application dependencies.</p>
<pre><code>var myApp = angular.module('myApp', ['gantt']);
</code></pre>
</li>
<li>
<p>Put <code>gantt</code> directive into your HTML code at the position you would like to show the Gantt chart.</p>
<pre><code>&lt;div gantt data=data&gt;&lt;/div&gt;
</code></pre>
</li>
<li>
<p>Define data variable in your scope to start using gantt through two-way binding.</p>
<pre><code>$scope.data = [
    {name: 'row1', tasks: [
        {name: 'task1', from: &lt;date&gt;, to: &lt;date&gt;},
        {name: 'task2', from: &lt;date&gt;, to: &lt;date&gt;}
        ]
    },
    {name: 'row2', tasks: [
        {name: 'task3', from: &lt;date&gt;, to: &lt;date&gt;},
        {name: 'task4', from: &lt;date&gt;, to: &lt;date&gt;}
      ]
    },
  ...
]
</code></pre>
</li>
<li>
<p>[Optional] You can load <a href="../configuration/plugins">plugins</a> like 
  <a href="../plugins/table">table</a> to display row names on left side, 
  <a href="../plugins/movable">movable</a> to make tasks movable and resizable with mouse and touch events, and 
  <a href="../plugins/tooltips">tooltips</a> to enable tooltips on mouse over.</p>
<pre><code>var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);
</code></pre>
<!-- -->

<pre><code>&lt;div gantt data=data&gt;
  &lt;gantt-table&gt;&lt;/gantt-table&gt;
  &lt;gantt-movable&gt;&lt;/gantt-movable&gt;
  &lt;gantt-tooltips&gt;&lt;/gantt-tooltips&gt;
&lt;/div&gt;
</code></pre>
</li>
<li>
<p>For a sample app see the files in <code>demo</code> or <a href="http://plnkr.co/XYYkD8tf5b2LQs5kL5nx">Plunker</a>.</p>
</li>
</ol>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>